<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<div th:fragment="myOrderSearchBar" class="bar bar-header-secondary">
		<div class="searchbar row">
			<div class="search-input col-80">
				<label class="icon icon-search" for="search"></label>
				<input type="search" v-model="searchMobileNo" placeholder='输入收件人手机号码...' />
			</div>
			<a class="button button-fill button-primary col-20" style="top:0;" @click="searchOrders">搜索</a>
		</div>
	</div>
	<div th:fragment="myOrderPage" class="content">
		<div class="buttons-tab fixed-tab" data-offset="44">
		    <a href="#unpaidOrders_tab" class="tab-link active button" @click="showUnpaidOrders">待付款<span class="order-status-badge" v-if="orderNum['UNPAID'] > 0">{{orderNum['UNPAID']}}</span></a>
		    <a href="#deliveringOrders_tab" class="tab-link button" @click="showDeliveringOrders">待发货<span class="order-status-badge" v-if="orderNum['DELIVERING'] > 0">{{orderNum['DELIVERING']}}</span></a>
		</div>
   		<div class="tabs">
   			<div id="unpaidOrders_tab" class="tab active">
   				<div class="card" v-for="order in unpaidOrders">
   					<div th:replace="fragments/admin/order :: myOrderList"></div>
				</div>
   			</div>
   			<div id="deliveringOrders_tab" class="tab">
   				<div class="card" v-for="order in deliveringOrders">
   					<div th:replace="fragments/admin/order :: myOrderList"></div>
				</div>
   			</div>
   		</div>
	</div>
	<div th:fragment="myOrderList">
		<div class="card-header" :class="order.orderHeaderClass">
			<span>订单号:{{order.orderNo}}</span>
			<span v-if="order.status == 'UNPAID'"><a href="#" class="button button-fill button-success" @click="confirmPaid(order)">确认付款</a></span>
			<span v-if="order.status == 'DELIVERING'"><a href="#" class="button button-fill button-info" @click="shipping(order)">发货</a></span>
		</div>
		<div class="card-content" @click="gotoDetail(order)">
			<div class="list-block media-list">
				<ul>
					<li class="item-content item-link" v-for="goods in order.goodses">
						<div class="item-media">
							<img :src="goods.image" style='width: 3rem;height: 3rem;'>
						</div>
						<div class="item-inner">
							<div class="item-title-row">
								<div class="item-title">{{goods.name}}</div>
								<div class="item-after">{{goods.totalPrice_fmt}}</div>
							</div>
							<div class="item-text">数量：{{goods.quantity}}<br>单价：{{goods.unitPrice_fmt}}</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
		<div class="card-footer">
			<span>下单时间：{{order.orderTime_fmt}}</span> <span>代理商：{{order.agentName}}</span>
		</div>
		<div class="card-footer"  v-if="order.status == 'UNPAID'">
			<span>应付款：<span class="button-danger">{{order.orderFee_fmt}}</span> （包含{{order.shoppingFee_fmt}}快递费用）</span>
		</div>
	</div>
	
	<div th:fragment="myOrderDetailPage" class="content">
		<div class="content-block-title">订单商品</div>
		<div class="list-block">
			<ul>
				<li class="item-content" v-for="goods in order.goodses">
					<div class="item-inner">
						<div class="item-title">{{goods.name}}</div>
						<div class="item-after">{{goods.quantity}} × {{goods.unitPrice_fmt}}</div>
					</div>
				</li>
				<li class="item-content">
					<div class="item-inner">
						<div class="item-title">运费</div>
						<div class="item-after">{{order.shoppingFee_fmt}}</div>
					</div>
				</li>
			</ul>
		</div>
		<div class="list-block">
			<ul>
				<li class="item-content">
					<div class="item-inner">
						<div class="item-title">合计</div>
						<div class="item-after">共支付{{order.orderFee_fmt}}，计入销量{{order.goodsFee_fmt}}</div>
					</div>
				</li>
			</ul>
		</div>
		<div class="content-block-title">订单详情</div>
		<div class="list-block">
			<ul>
				<li class="item-content" v-for="orderTitle in orderTitles">
					<div class="item-inner" v-for="(title,field) in orderTitle">
						<div class="item-title">{{title}}</div>
						<div class="item-after">{{order[field]}}</div>
					</div>
				</li>
			</ul>
		</div>
	</div>
	<div th:fragment="expressPage" class="popup popup-express">
		<div class="content-block">
			<div class="clearfix">
	        	<div class="pull-left">请填写物流信息</div>
	        	<div class="pull-right"><a href="#" class="close-popup">关闭</a></div>
            </div>
			<div class="list-block">
				<ul>
					<li>
						<div class="item-content">
							<div class="item-media"><i class="icon icon-form-name"></i></div>
							<div class="item-inner">
								<div class="item-input">
									<select v-model="logistics.express">
										<option value="圆通">圆通</option>
										<option value="中通">中通</option>
										<option value="申通">申通</option>
										<option value="百世">百世</option>
										<option value="韵达">韵达</option>
										<option value="天天">天天</option>
										<option value="顺丰">顺丰</option>
										<option value="邮政">邮政</option>
									</select>
								</div>
							</div>
						</div>
					</li>
					<li>
						<div class="item-content">
							<div class="item-media"><i class="icon icon-form-name"></i></div>
							<div class="item-inner">
								<div class="item-input">
									<input type="text" v-model="logistics.waybillNo" placeholder="请输入运单号">
								</div>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
		<div class="content-block">
			<p><a href="javascript:void(0);" class="button button-big" @click="shippingOrder">保&nbsp;&nbsp;&nbsp;&nbsp;存</a></p>
		</div>
	</div>
</body>
</html>